#{extends 'main.html' /}
#{set title:'select.html' /}

<h1>Loaded Applications:</h1>
<ul>
%{
     for(webApp in loadedApps) { 
}%
		<li>
			<h2>${webApp.getName()}</h2></br></br>
%{
			out.print(webApp.getHTMLInterface());
}%
			<script>
%{
				for(elem in webApp.getSelectableUIElementsIds()) {
}%
					$('#${elem}').hover(
						function () {
							$(this).addClass("selectable");
						},
						function () {
							$(this).removeClass("selectable");
						}
					);
%{
				}
}%

%{
				for(elem in webApp.getSelectedUIElementsIds()) {
}%
					$('#${elem}').addClass("selected");
%{
				}
}%

			</script>
			<form method="GET" action="@{Composition.selectAllUIElements(webApp.getAppId())}">
				<input type="submit" value="Select All UI Elements" />
			</form>
		</li>
%{
     }
}%
</ul>

<hr/>

<a href="@{Composition.substitute()}">Go to "Substitution" step</a>